<template>
  <div class="repair-detail">
    <div class="info-block">
      <h2>报修单基本信息</h2>
      <el-form label-width="100px">
        <el-form-item label="单号">
          <el-input v-model="repair.repairNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="repair.repairAddress" readonly></el-input>
        </el-form-item>
        <el-form-item label="维修状态">
          <el-input v-model="repair.repairStatus" readonly></el-input>
        </el-form-item>
        <el-form-item label="报修人">
          <el-input v-model="repair.reporter" readonly></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="repair.contactPhone" readonly></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="repair.repairType" readonly></el-input>
        </el-form-item>
        <el-form-item label="报修内容">
          <el-input v-model="repair.repairContent" type="textarea" readonly></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="info-block">
      <h2>报修图像</h2>
      <el-form :model="repair" label-width="100px">
          <el-image v-for="img in repair.reportImages" :src="img" :key="img" style="margin: 5px" />
      </el-form>
    </div>
    <div class="info-block">
      <h2>维修员信息</h2>
      <el-form :model="repair" label-width="120px">
        <el-form-item label="维修员1">
          <el-input v-model="repair.repairPerson1" readonly></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="repair.repairPerson1Phone" readonly></el-input>
        </el-form-item>
        <el-form-item label="维修员2">
          <el-input v-model="repair.repairPerson2" readonly></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="repair.repairPerson2Phone" readonly></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="info-block">
      <h2>维修图像</h2>
      <el-form :model="repair" label-width="120px">
          <el-image v-for="img in repair.repairImages" :src="img" :key="img" style="margin: 5px" />
      </el-form>
    </div>
    <div class="info-block">
      <h2>评价信息</h2>
      <el-form :model="evaluationForm" label-width="100px">
        <el-form-item label="评分">
          <el-rate v-model="evaluationForm.rating"></el-rate>
        </el-form-item>
        <el-form-item label="评价内容">
          <el-input v-model="evaluationForm.comments" type="textarea"></el-input>
        </el-form-item>
        <el-button type="primary" @click="submitEvaluationForm">提交评价</el-button>
      </el-form>
    </div>
  </div>
</template>


<script>
export default {
  name: "UserRepairDetail",
  data() {
    return {
      repair: this.$route.params.repair || {},
      evaluationForm: {
        rating: 0,
        comments: '',
        repairStatus : '',
        id: this.$route.params.repair ? this.$route.params.repair.id : null
      }
    };
  },
  created() {
    if (this.$route.params.repair) {
      this.repair = this.$route.params.repair;
      this.evaluationForm.rating = this.repair.rating;
      this.evaluationForm.comments = this.repair.comments;
      this.evaluationForm.repairStatus = this.repair.repairStatus;
    }
  },
  methods: {
    submitEvaluationForm() {
      this.$request.post('/user/repair/evaluate', this.evaluationForm).then(
        (res) => {
          if (res.code === '200') {
            this.$message.success('评价提交成功');
            this.repair.rating = this.evaluationForm.rating;
            this.repair.comments = this.evaluationForm.comments;
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    }
  }
};
</script>

<style scoped>
/* 手机端表格滚动 */
@media (max-width: 767px) {
  .table {
    overflow-x: auto;
  }
}

.repair-detail {
  padding: 20px;
}

.info-block {
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
  padding: 15px;
  border-radius: 4px;
}

.info-block h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
}
</style>
